<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/13
  Time: 12:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resource/css/bootstrap.min.css">

</head>
<body>
    <h1>海龟汤小组过程展示</h1>
    <h3>小组成员：田进财 刘纹硕 林泽夫 罗子航</h3>
    <div>1.资料查找，工作部署，需求分析</div>
    <div>
        这一部分主要由罗子航负责，查找了很多现存国内外海龟汤资料；
        同时进行了小组分工，时间上进行规划，提出很多idea。
        包括前期的产品分析和墨刀需求制作等。
    </div>
    <div>2.海龟汤爬虫获取</div>
    <div>
        这一部分主要由田进财负责。访问：https://yesnogame.net/en/，
        分析网页结构，外层的puzzle列表可以通过page字段更新，
        由于只有9页puzzle列表，这里采用了scrapy shell直接爬取，
        浏览器查看源码，找到对应元素的css选择器，
        使用scrapy shell 爬取puzzle列表重定位到文件，
        编写爬虫时即可使用前面爬取到的puzzle列表生成目标网页，
        在scrapy中编写相应逻辑爬取，保存为csv文件后使用pymsql保存到数据库。
    </div>
    <h4>scrapy爬取过程</h4>
    <img src="${pageContext.request.contextPath}/resource/img/TJC_1_scrapy.png"/>
    <h4>存入数据库部分截图</h4>
    <img src="${pageContext.request.contextPath}/resource/img/TJC_2_scrapy.png"/>
    <div>3.后端数据供给</div>
    <div>
        这一部分主要由刘纹硕负责，主要使用Spring做bean管理，SpringMVC做数据回显，
        用Mybatis进行数据库管理，用户聊天部分使用websocket。将前端所需数据使用json字符串回显。
        其中需要使用Session记录当前用户状态和游戏属性等。
        大致流程如下，用户登录时传入请求，后台通过数据库验证用户身份；
        进入游戏，用户随机抽取身份和海龟汤面。
        数据库设计方面，设计两个数据库，分别为用户和海龟汤。
        用户数据包括id，用户名和密码，用于核实身份；
        海龟汤包括id，汤面，汤底，用于抽取。
    </div>
    <h4>json字符串回显</h4>
    <img src="${pageContext.request.contextPath}/resource/img/LWS.PNG"/>
    <h4>大致目录结构</h4>
    <img src="${pageContext.request.contextPath}/resource/img/LWS1.PNG"/>
    <h4>4.前端数据展示与交互</h4>
    <div>
        这一部分主要由林泽夫负责。我们这个项目前端主要的难点是跟后端通过axios交互数据。
        </br>
        具体来说，就是前端会根据用户的输入发送post请求。从后端获取JSON形式键值对，通过返回的值进行数据显示或跳转等。
        </br>
        比如用户名和密码输入正确就进入游戏大厅，否则弹窗提示密码错误。剩下的部分主要就是设计一个比较好看的游戏界面了。
        </br>
        又学习了一段时间的photoshop，再结合网上的一些图，最终做出了一个还算比较好看，而且符合我们游戏主题，即偏黑暗风的。游戏画面。
    </div>
    <h4>游戏大厅</h4>
    <img src="${pageContext.request.contextPath}/resource/img/LZF_1.png"/>
    <h4>主页面</h4>
    <img src="${pageContext.request.contextPath}/resource/img/LZF_2.png"/>
    <h4>登陆页面</h4>
    <img src="${pageContext.request.contextPath}/resource/img/LZF_3.png">
</body>
</html>
